/**
 * @description tabBar
 */
import React from 'react';
import classnames from "classnames";
import "./styles/App.less";

import innerRouter from "commons/innerRouter";

import icon_coupon from "images/icon/coupon.png";
import icon_market from "images/icon/market.png";
import icon_mine from "images/icon/mine.png";
import icon_category from "images/icon/category.png";

const tabBarData = [
  {
    name: "我要买券",
    icon: icon_coupon,
    url: "./index.html"
  }, {
    name: "商品分类",
    icon: icon_category,
    url: "./category.html"
  },{
    name: "出卡啦集市",
    icon: icon_market,
    url: "./market.html#/Collection"
  }, {
    name: "个人中心",
    icon: icon_mine,
    url: "./myCenter.html#/Home"
  }
]

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      tabBarData: this.props.data || tabBarData
    };
  }

  render() {
    return (
      <div className="x-tabBar">
        {
          this.state.tabBarData.map((item, index) => {
            return (
              <div key={index} className={classnames("x-tabBar-item", {
                "x-tabBar-item-active": this.props.activeIndex == index
              })} onClick={() => {
                if (item.url) {
                  innerRouter(item.url, false, "replace");
                }
              }}>
                <div><img src={item.icon} alt="" /></div>
                <div><span>{item.name}</span></div>
              </div>
            )
          })
        }
      </div>
    );
  }
}

App.defaultProps = {};

export default App;
